<template>
  <view class="good_view">
    <!-- 商品 为你推荐 -->
    <view class="img_view">
      <image
        style="height: 100%; width: 100%"
        src="@/assets/test/a2.png"
        mode="aspectFill"
      />
    </view>
    <view class="good_info">
      <text class="title">{{ arr }}</text>
      <view class="teshu">
        <view class="special">特价</view>
      </view>
      <view class="price_view">
        <view class="price"> $128.0 </view>
        <image
          style="height: 44rpx; width: 44rpx"
          src="@/static/icon/shoop.png"
          mode="aspectFill"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";

const ra = parseInt(Math.random() * (60 - 10) + 10);
let arr = "";
Array(ra)
  .fill(1)
  .forEach(() => {
    arr += "汉";
  });
</script>

<style lang="scss" scoped>
.good_view {
  width: 100%;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  margin-bottom: 20rpx;
  .good_info {
    width: 100%;
    padding: 0 30rpx 30rpx;
    display: flex;
    flex-direction: column;
    .title {
      font-weight: 500;
      font-size: 26rpx;
      color: #333333;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      line-clamp: 3;
      -webkit-line-clamp: 3; //显示几行
    }
    .price_view {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        line-height: 1;
      }
    }
    .teshu {
      margin-bottom: auto;
      margin-top: 0;
      line-height: 1;
      margin-bottom: 20rpx;
      .special {
        height: fit-content;
        width: fit-content;
        display: inline-block;
        border-radius: 2px;
        padding: 2px;
        font-weight: 400;
        font-size: 18rpx;
        color: #333333;
        line-height: 21rpx;
        border: 1rpx solid #333333;
        margin-right: 10rpx;
      }
    }
  }
  .img_view {
    height: 270rpx;
    width: 100%;
  }
}
</style>
